<!doctype html>
<html>
  <head>
    <!-- Set the title to an empty value, which will be replaced by a localized
         name by JavaScript -->
    <title>&#xfeff;</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../css/main.css">
    <script src="../js/third_party/ccv/js/face.js"></script>
    <script src="../js/third_party/ccv/js/ccv.js"></script>
    <script src="../js/third_party/glfx/glfx.js"></script>
    <script src="../js/util.js"></script>
    <script src="../js/scrollbar.js"></script>
    <script src="../js/models/gallery.js"></script>
    <script src="../js/view.js"></script>
    <script src="../js/views/gallery_base.js"></script>
    <script src="../js/views/camera.js"></script>
    <script src="../js/views/dialog.js"></script>
    <script src="../js/views/album.js"></script>
    <script src="../js/views/browser.js"></script>
    <script src="../js/tracker.js"></script>
    <script src="../js/effect.js"></script>
    <script src="../js/effects/normal.js"></script>
    <script src="../js/effects/andy.js"></script>
    <script src="../js/effects/big_eyes.js"></script>
    <script src="../js/effects/beauty.js"></script>
    <script src="../js/effects/swirl.js"></script>
    <script src="../js/effects/pinch.js"></script>
    <script src="../js/effects/grayscale.js"></script>
    <script src="../js/effects/retro.js"></script>
    <script src="../js/effects/sepia.js"></script>
    <script src="../js/effects/colorize.js"></script>
    <script src="../js/effects/modern.js"></script>
    <script src="../js/effects/newspaper.js"></script>
    <script src="../js/effects/tilt_shift.js"></script>
    <script src="../js/effects/vintage.js"></script>
    <script src="../js/effects/funky.js"></script>
    <script src="../js/effects/cinema.js"></script>
    <script src="../js/effects/photo_lab.js"></script>
    <script src="../js/effects/ghost.js"></script>
    <script src="../js/processor.js"></script>
    <script src="../js/router.js"></script>
    <script src="../js/main.js"></script>
  </head>
  <body class="controls-visible initializing mirror">
    <div id="camera">
      <div id="main-canvas-wrapper"></div>
      <div id="main-fast-canvas-wrapper"></div>
        <div id="toolbar-puller-wrapper">
          <div id="toolbar" class="dynamic">
            <div id="toolbar-background"></div>
            <div id="toolbar-stripe">
              <div class="buttons opposite-side">
                <button id="filters-toggle" tabindex="0"
                        i18n-label="filtersButton"></button>
              </div>
              <div class="buttons prev-to-middle">
                <input type="checkbox" id="toggle-mirror" tabindex="0"
                       i18n-label="toggleMirrorButton" checked>
              </div>
              <div id="buttons">
                <button id="take-picture" tabindex="0"
                        i18n-label="takePictureButton"></button>
              </div>
              <div class="buttons next-to-middle">
                <input type="checkbox" id="toggle-timer" tabindex="0"
                       i18n-label="toggleTimerButton" checked>
                <input type="checkbox" id="toggle-multi" tabindex="0"
                       i18n-label="toggleMultiButton" checked>
              </div>
              <div class="buttons">
                <button id="album-enter" tabindex="0"
                        i18n-label="galleryButton"></button>
              </div>
            </div>
            <div id="effects-wrapper" aria-role="listbox">
              <div id="effects">
                <ul class="padder"></ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="toast" class="visible">
        <div id="toast-message"></div>
      </div>
      <div id="picture-preview">
      </div>
      <div id="performance-test">
        <div class="perf-test-msg">Testing performance</div>
        <div id="perf-test-bar-wrapper">
          <div id="perf-test-bar" style="width: 30%">
            0%
          </div>
        </div>
        <div id="perf-test-bubble-wrapper">
          <div id="perf-test-bubble">
            0
          </div>
        </div>
      </div>
    </div>
    <div id="header">
      <div class="buttons dynamic">
        <button id="maximize-button" tabindex="-1"
                i18n-aria-label="maximizeButton"></button>
        <button id="close-button" tabindex="-1"
                i18n-aria-label="closeButton"></button>
      </div>
    </div>
    <div id="album" aria-role="listbox" i18n-aria-label="galleryImages">
      <div class="padder"></div>
      <div class="buttons dynamic">
        <button id="album-print" disabled tabindex="0"
                i18n-label="printButton"></button>
        <button id="album-export" disabled tabindex="0"
                i18n-label="exportButton"></button>
        <button id="album-delete" disabled tabindex="0"
                i18n-label="deleteButton"></button>
        <button id="album-back" tabindex="0"
                i18n-label="backButton"></button>
      </div>
    </div>
    <div id="browser" aria-role="listbox" i18n-aria-label="galleryImages">
      <div class="padder">
        <div class="bounds-padder"></div>
        <div class="bounds-padder"></div>
      </div>
      <div class="buttons dynamic">
        <button id="browser-print" disabled tabindex="0"
                i18n-label="printButton"></button>
        <button id="browser-export" disabled tabindex="0"
                i18n-label="exportButton"></button>
        <button id="browser-delete" disabled tabindex="0"
                i18n-label="deleteButton"></button>
        <button id="browser-back" tabindex="0"
                i18n-label="backButton"></button>
      </div>
    </div>
    <div id="error">
      <div class="icon"></div>
      <div id="error-msg"></div>
      <div id="error-msg-hint"></div>
    </div>
    <div id="dialog">
      <div id="dialog-popup" aria-role="dialog" aria-labelledby="dialog-msg"
           tabindex="0">
        <div id="dialog-msg"></div>
        <div id="dialog-buttons">
          <button id="dialog-positive-button"></button>
          <button id="dialog-negative-button"></button>
        </div>
      </div>
    </div>
    <div id="tooltip">
      <div id="tooltip-msg"></div>
      <div id="tooltip-arrow"></div>
    </div>
    <div id="initializing"></div>
  </body>
</html>

